<style lang="scss">
.label {
  width: 50px;
  text-align: right;
}

.colBorder {
  width: 24% !important;
  border: 2px solid #909298;
  border-radius: 8px;
  margin-right: 1%;
}

.creativeBorder {
  width: 100%;
  height: 200px;
  position: relative;
  margin: 20px auto auto auto;
}

.creativeImage {
  max-height: 100%;
  height: auto;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  max-width: 100%;
  display: flex;
  margin: auto;
  right: 0;
  left: 0;
}

#agentContent {
  height: 40vh;
  overflow: auto;
}

</style>

<template>
  <basic-container>
    <el-form>
      <div style="position: relative">
        <div style="display: flex; justify-content: left; text-align: center;">
          <h2><b>实时报告</b></h2>
          <span style="margin-left: 20px; margin-top: 30px">报告时间: {{ reportDate }}</span>
        </div>
      </div>

      <!--  table   -->
      <el-form-item>
        <el-table
          :data="tableData"
          border="true"
          style="width: 100%">
          <el-table-column
            prop="label"
            label=""
            width="180">
          </el-table-column>
          <el-table-column
            prop="sum"
            label="总计"
            width="180">
          </el-table-column>
          <el-table-column
            v-for="(item,index) in platformList"
            :key="index"
            :prop="item"
            :label="getPlatformName(item)"
            width="180">
          </el-table-column>
          <el-table-column
            v-for="(item,index) in agencyList"
            :key="index"
            :prop="'tenantId' + item.agencyId"
            :label="item.agencyName"
            width="180">
          </el-table-column>
        </el-table>
      </el-form-item>

      <!-- 折叠面板 -->
      <el-form-item>
        <el-collapse v-model="activeNames">
          <el-collapse-item name="1">
            <template slot="title">
              <span style="font-size: 18px;font-weight: 800;color: red">
                违规使用的素材
              </span>
            </template>
            <el-col v-if="agencyList.length == 0 && (roles.admin || roles.operator)" span="5">
              <el-button id="id-offer-monitor-openDealNotice" @click="openDealNotice">一键生成处理通知</el-button>
            </el-col>
            <el-col span="5">
              <el-button id="id-offer-monitor-illegalTotal" type="text">(总计：{{ illegalTotal }})</el-button>
            </el-col>

            <!--      违规素材数据      -->
            <el-row style="display: flex">
              <el-col span="12">
                <el-form-item label="提交人:">
                  <el-select id="id-offer-monitor-wgSubmitter" size="mini" filterable v-model="form.wgSubmitter" clearable placeholder="请选择"
                             v-if="agencyList.length == 0"
                             @change="changeWgSubmitter">
                    <el-option key="" value="" label="全部"></el-option>
                    <el-option v-for="(item,index) in submitterList" :key="index" :value="item.id"
                               v-if="tableData.length > 0"
                               :label="item.realName">
                    </el-option>
                  </el-select>
                  <el-select id="id-offer-monitor-changeWgSubmitter" size="mini" filterable v-model="form.wgAgencyId" clearable placeholder="请选择"
                             v-if="agencyList.length > 0"
                             @change="changeWgSubmitter">
                    <el-option key="" value="" label="全部"></el-option>
                    <el-option v-for="(item,index) in agencyList" :key="index" :value="item.agencyId"
                               v-if="tableData.length > 0"
                               :label="item.agencyName">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <div v-if="null == wgCreativeList || wgCreativeList.length == 0">
              <h3>暂无违规素材</h3>
            </div>
            <div v-else>
              <el-row v-loading="illegalDisable"
                      element-loading-text="拼命加载中"
                      element-loading-spinner="el-icon-loading"
                      element-loading-background="rgba(255, 250, 250, 0.8)">
                <el-col style="position: relative" v-for="(creative, i) in wgCreativeList" :key="i" span="5"
                        class="colBorder">
                  <div class="card" style="margin: 0 auto;width: 90%">
                    <div class="card-img">
                      <el-card shadow="hover">
                        <div class="creativeBorder">
                          <img :src="creative.thumbnailUrl" class="creativeImage" @click="chooseCreative(creative)">
                        </div>
                      </el-card>
                    </div>
                    <!-- 相对定位 -->
                    <div class="card-text" style="position:relative;">
                      <div style="margin-top: 10px">名称 : {{ creative.name }}</div>
                      <div style="margin-top: 10px">提交人 : {{ creative.submitter }}</div>
                      <div style="margin-top: 10px; ">短ID : {{ creative.shortId }}</div>
                      <div style="margin-top: 10px; margin-right: 15px">媒体 : {{ creative.platform }}</div>
                      <div>
                        <div v-if="creative.status === 0">状态 : 等待提交</div>
                        <div v-else-if="creative.status === 1">状态 : 等待审核</div>
                        <div v-else-if="creative.status === 2">状态 : 审核通过</div>
                        <div v-else-if="creative.status === 3">状态 : 审核拒绝</div>
                        <div v-else-if="creative.status === 4">状态 : 禁用</div>
                        <div>审批时间 : {{ creative.auditTime }}</div>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
              <el-row style="text-align: center;margin-top: 10px" v-show="illegalTotal > wgCreativeList.length">
                <div style="font-size: 16px;color: #4093ff; cursor: pointer" @click="getMore('wgCreativeList')">
                  查看更多
                </div>
              </el-row>
            </div>


          </el-collapse-item>
          <!--      在线素材数据      -->
          <el-collapse-item name="2">
            <template slot="title">
              <span style="font-size: 18px;font-weight: 800;color: #00a680">
               在线素材
              </span>
            </template>
            <div>
              <el-row>
                <el-col span="2">
                  <el-button type="text">(总计：{{ olineTotal }})</el-button>
                </el-col>
                <el-col span="22">
                  <el-row>
                    <el-col style="width:220px;">
                      <el-form-item label="提交人:" style="width:220px;">
                        <el-select size="mini" filterable v-model="form.onlineSubmitter" clearable placeholder="请选择"
                                   v-if="agencyList.length == 0"
                                   style="width:150px;">
                          <el-option key="" value="" label="全部"></el-option>
                          <el-option v-for="(item,index) in submitterList" :key="index" :value="item.id"
                                     v-if="tableData.length > 0"
                                     :label="item.realName">
                          </el-option>
                        </el-select>
                        <el-select id="id-offer-monitor-onlineAgencyId"
                                   size="mini" filterable v-model="form.onlineAgencyId" clearable placeholder="请选择"
                                   v-if="agencyList.length > 0"
                                   style="width:150px;">
                          <el-option key="" value="" label="全部"></el-option>
                          <el-option v-for="(item,index) in agencyList" :key="index" :value="item.agencyId"
                                     v-if="tableData.length > 0"
                                     :label="item.agencyName">
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col style="width:220px;">
                      <el-form-item label="媒体:" style="width:220px;">
                        <el-select id="id-offer-monitor-platform"
                                   size="mini" filterable v-model="form.platform" clearable placeholder="请选择"
                                   style="width:150px;">
                          <el-option key="" value="" label="全部"></el-option>
                          <el-option v-for="(item,index) in platformList" :key="index" :value="item"
                                     :label="getPlatformName(item)">
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col style="width:220px;">
                      <el-form-item label="素材名:" style="width:220px;">
                        <el-input id="id-offer-monitor-creativeName" size="small" v-model="form.creativeName" placeholder="请选择素材名"
                                  style="width:150px;"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col style="width:360px;">
                      <el-form-item label="在线天数:" style="width:360px;">
                        <el-input id="id-offer-monitor-minDays" size="small" v-model="form.minDays" placeholder="请输入最小天数"
                                  style="width:130px;"></el-input>
                        --
                        <el-input id="id-offer-monitor-maxDays" size="small" v-model="form.maxDays" placeholder="请输入最大天数"
                                  style="width:130px;"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col style="width:80px;">
                      <el-button id="id-offer-monitor-changeOnlineSubmitter" style="width:80px; margin-top: 6px;" type="primary" icon="el-icon-search" size="mini"
                                 @click="changeOnlineSubmitter">筛 选
                      </el-button>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </div>
            <div v-if="null == olineCreativeList || olineCreativeList.length == 0">
              <h3>暂无在线素材</h3>
            </div>
            <div v-else>
              <el-row
                v-loading="olineDisable"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(255, 250, 250, 0.8)"
              >
                <el-col style="position: relative"
                        class="colBorder" v-for="(creative, i) in olineCreativeList"
                        :key="i">
                  <div class="card" style="margin: 0 auto;width: 90%">
                    <div class="card-img">
                      <el-card shadow="hover">
                        <div class="creativeBorder">
                          <img :src="creative.thumbnailUrl" class="creativeImage" @click="chooseCreative(creative)">
                        </div>
                      </el-card>
                    </div>
                    <!-- 相对定位 -->
                    <div class="card-text" style="position:relative;">
                      <div style="margin-top: 10px"><span class="label">名称 : </span>{{ creative.name }}</div>
                      <div style="margin-top: 10px"><span class="label">提交人 : </span>{{ creative.submitter }}</div>
                      <div style="margin-top: 10px;"><span class="label">短ID : </span>{{ creative.shortId }}</div>
                      <div style="margin-top: 10px; margin-right: 15px;"><span class="label">媒体 : </span>
                        {{ creative.platform }}
                      </div>
                      <div style="display: flex; justify-content: space-between;">
                        <div v-if="creative.status == 0" style="width: 50%"><span class="label">状态 : </span>等待提交</div>
                        <div v-else-if="creative.status == 1" style="width: 50%"><span class="label">状态 : </span>等待审核
                        </div>
                        <div v-else-if="creative.status == 2" style="width: 50%"><span class="label">状态 : </span>审核通过
                        </div>
                        <div v-else-if="creative.status == 3" style="width: 50%"><span class="label">状态 : </span>审核拒绝
                        </div>
                        <div v-else-if="creative.status == 4" style="width: 50%"><span class="label">状态 : </span>禁用
                        </div>
                        <div style="width: 50%"><span class="label">{{ getOnlineTimeLengthTitle() }} : </span>{{
                            getOnlineTimeLengthValue(creative.onlineDays)
                          }}
                        </div>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
              <el-row style="text-align: center;margin-top: 10px">
                <div style="font-size: 16px;color: #4093ff; cursor: pointer"
                     v-show="olineTotal > olineCreativeList.length"
                     @click="getMore('olineCreativeList')">
                  查看更多
                </div>
              </el-row>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-form-item>

      <!--  一键生成处理通知的弹窗     -->
      <el-dialog
        title=""
        :visible.sync="dialogVisible"
        width="60%"
        append-to-body
        :close-on-click-modal="false"
        :before-close="handleClose">
        <div style="background-color: #e5f1fb;">
          <div id="agentContent">
            <p>截止{{ reportDate }}，违规使用素材合计{{ form.countViolation }}个，请各负责人及时处理，违规素材信息如下：</p>
            <div v-for="(itemMap, key) in dealNoticeList" :key="key">
              <!--     分优化师       -->
              <div>优化师: {{ key }}</div>
              <!-- 分账户 -->
              <div v-for="(accountList, accountKey) in itemMap" :key="accountKey">
                <div>
                  账户: {{ accountKey }}
                </div>
                <!-- 分素材 -->
                <div v-for="(creative, index) in accountList" :key="index">
                  {{ creative.name }}
                </div>
              </div>
              <br/>
              <br/>
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="copyText">复 制</el-button>
          <el-button @click="closeDialog">取 消</el-button>
        </span>
      </el-dialog>
    </el-form>
  </basic-container>
</template>


<script>
import {getSysDictList} from '@/api/system/dict'
import {getReportTime, getTableList, getIllegalUseList, getDealNotice} from "@/api/offer/monitor";
import {getOptimizer} from "@/api/offer/creative";
import {mapGetters} from "vuex";

export default {
  watch: {
    offer: {
      deep: true,
      handler(val, old) {
        if (val == '' || val == null || val === old) {
          return
        }
        this.form.onlineAgencyId = '';
        this.form.onlineSubmitter = '';
        this.form.wgAgencyId = '';
        this.form.wgSubmitter = '';
        this.refresh();
      }
    }
  },
  data() {
    return {
      dialogVisible: false,
      reportDate: '',  //报告时间
      platformDictList: [],//平台列表
      platformList: [],
      agencyList: [],
      tableData: [],  //报表table数据
      dealNoticeList: [],  //一键生成处理通知
      activeNames: ['1', '2'],
      submitterList: [],  //提交者名单下拉框
      wgCreativeList: [],   //违规素材
      olineCreativeList: [],   // 在线素材
      copyContent: '',
      form: {
        countViolation: 0,   //违规素材汇总
        countOline: 0,
        wgSubmitter: '', //违规提交人
        onlineSubmitter: '',  //在线素材提交者
        wgAgencyId: '',//违规素材提交代理商
        onlineAgencyId: '',//在线素材提交代理商
        minDays: '',
        maxDays: '',
        creativeName: '',
        platform: '',
      },
      illegalPage: {
        current: 1,
        size: 8,
        onlineStatus: 2,
        offerId: '',
      },
      illegalDisable: false,
      illegalTotal: 0,
      olinePage: {
        current: 1,
        size: 8,
        offerId: ''
      },
      olineTotal: 0,
      olineDisable: false,
    };
  },

  computed: {
    ...mapGetters(["roles", "offer"]),
  },
  created() {
    getSysDictList('platforms').then(map => {
      this.platformDictList = map['platforms']
    })
  },
  mounted() {
    this.refresh = () => {
      //refresh开始，这样写避免代码迁移太多
      let offerId = this.offer
      getReportTime(offerId).then(res => {
        this.reportDate = res.data.data + " UTC+8";
      });

      getTableList(offerId).then(res => {
        let response = res.data.data;
        let tableData = response.tableList;
        this.agencyList = response.agencyList;
        this.platformList = response.platformList;
        if (tableData.length > 0) {
          this.tableData = tableData;
          if ('' !== response.countViolation) {
            this.form.countViolation = response.countViolation
          }
          if ('' !== response.countOline) {
            this.form.countOline = response.countOline;
          }
        } else {
          this.tableData = [];
          this.form.countViolation = 0;
          this.form.countOline = 0;
        }
      });
      this.illegalPage.offerId = this.offer
      getIllegalUseList(Object.assign(this.getCondParam('wb'), this.illegalPage)).then(res => {
        this.wgCreativeList = res.data.data.records;
        this.illegalTotal = res.data.data.total
      });
      this.olinePage.offerId = this.offer
      getIllegalUseList(Object.assign(this.getCondParam('online'), this.olinePage)).then(res => {
        this.olineCreativeList = res.data.data.records;
        this.olineTotal = res.data.data.total
      });
      //提交者名单
      getOptimizer().then(res => {
        this.submitterList = res.data.data;
      });
      //refresh结束
    };

    this.refresh();
  },
  methods: {
    getPlatformName(platform) {
      for (let i = 0; i < this.platformDictList.length; i++) {
        if (this.platformDictList[i].dictKey == platform) {
          return this.platformDictList[i].dictValue;
        }
      }
      return platform;
    },
    closeDialog() {
      this.dialogVisible = false;
    },
    openDealNotice() {
      getDealNotice(this.offer).then(res => {
        this.dealNoticeList = res.data.data;
      });
      this.dialogVisible = true;
    },
    //违规userId 搜索
    changeWgSubmitter() {
      this.illegalPage.offerId = this.offer
      getIllegalUseList(Object.assign(this.getCondParam('wg'), this.illegalPage)).then(res => {
        this.wgCreativeList = res.data.data.records;
        this.illegalTotal = res.data.data.total
      });
    },
    //在线userId 搜索
    changeOnlineSubmitter() {
      if (this.form.minDays != null && this.form.minDays != '' && this.form.maxDays != null && this.form.maxDays != '') {
        if (!((this.form.minDays * 1) >= 0 && (this.form.minDays * 1) <= (this.form.maxDays * 1))) {
          this.$message.error("筛选条件非法：在线最小天数不能大于在线最大天数！");
          return;
        }
      }
      this.olinePage.offerId = this.offer
      getIllegalUseList(Object.assign(this.getCondParam('online'), this.olinePage)).then(res => {
        this.olineCreativeList = res.data.data.records;
        this.olineTotal = res.data.data.total
      });
    },
    getCondParam(type) {
      let condParam = {};
      if (type == 'online') {
        if (this.form.onlineSubmitter != '') {
          condParam.userId = this.form.onlineSubmitter;
        }
        if (this.form.onlineAgencyId != '') {
          condParam.agencyId = this.form.onlineAgencyId;
        }
        condParam.minDays = this.form.minDays;
        condParam.maxDays = this.form.maxDays;
        condParam.platform = this.form.platform;
        condParam.creativeName = this.form.creativeName;
      } else if (type == 'wg') {
        if (this.form.wgSubmitter != '') {
          condParam.userId = this.form.wgSubmitter;
        }
        if (this.form.wgAgencyId != '') {
          condParam.agencyId = this.form.wgAgencyId;
        }
      }
      return condParam;
    },
    //查看更多
    getMore(val) {
      if (val === 'olineCreativeList') {
        if (this.olineDisable) {
          return
        }
        this.olineDisable = true
        this.olinePage.size += 8
        this.olinePage.offerId = this.offer
        getIllegalUseList(Object.assign(this.getCondParam('online'), this.olinePage)).then(res => {
          this.olineDisable = false
          this.olineCreativeList = res.data.data.records;
          this.olineTotal = res.data.data.total
        });
      } else if (val === 'wgCreativeList') {
        if (this.illegalDisable) {
          return
        }
        this.illegalPage.size += 8
        this.illegalDisable = true
        this.illegalPage.offerId = this.offer

        getIllegalUseList(Object.assign(this.getCondParam('wg'), this.illegalPage)).then(res => {
          this.illegalDisable = false
          this.wgCreativeList = res.data.data.records;
          this.illegalTotal = res.data.data.total
        });
      }
    },

    copyText() {
      let text = document.getElementById("agentContent").innerText;
      let textarea = document.createElement('textarea')
      //将textarea的值设置为需要复制的内容
      textarea.value = text;
      //添加textarea标签
      document.body.appendChild(textarea)
      //选中textarea标签
      textarea.select()
      //执行复制
      document.execCommand('copy')
      //成功提示信息
      this.$message.success('复制成功!')
      //移除textarea标签
      document.body.removeChild(textarea)

      this.dialogVisible = false;
      this.clearData();
    },

    getOnlineTimeLengthTitle() {
      return '在线天数';
    },
    getOnlineTimeLengthValue(val) {
      let days = 0;
      if (val && val > 0) {
        days = val;
      }
      return '' + days + '天';
    },
    handleClose() {
      this.dialogVisible = false;
    },
    clearData() {
      this.form.wgCheckedList = [];
    },
  }
};
</script>

<style>
</style>
